<template>
	<view class="send-container">
		<view v-for="msg in history">
			{{msg}}
		</view>
		<view class="send-title">发送指令</view>
		<view class="content">
			<view>
				<text>接收人:</text>
				<uni-data-picker :localdata="dataTree" v-model="type_desc" @change="onchange"></uni-data-picker>
			</view>
			<view class="send-body">
				<text>发送指令内容:</text>
				<textarea @input="onblur" v-model="content" placeholder="请输入内容..." auto-height></textarea>
			</view>
			<view class="sticky-view">
				<button type="primary" @click="onSend">发送指令</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import service from '../../utils/http.js'
	export default {
		name: "send",
		data() {
			return {
				ws: null,
				history: '',
				receiver: '',
				content: '',
				dataTree:[],
				//  [{
				// 		text: "q",
				// 		value: "1"
				// 	},
				// 	{
				// 		text: "a",
				// 		value: "2"
				// 	}
				// ],
				type_desc: ''
			};
		},
		computed: {
			...mapState('m_user', ['userinfo'])
		},
		onLoad() {
			this.onUserList()
		},
		methods: {
			...mapMutations('m_user', ['updateUserinfo']),
			//发送指令的内容
			onblur(event) {
				this.content = event.detail.value
				// console.log(this.content)
			},
			onchange(e) {
				this.receiver = e.detail.value[0].value
				// console.log(this.receiver)
			},
			onUserList() {
				service.get('/api/Users/GetUsersList')
					.then(response => {
						const data = response.Data;
						this.dataTree = JSON.parse(data)
						// console.log(this.dataTree)
					})
					.catch(error => {
						console.error(error);
					});
			},
			onSend() {
				const msg = {
					Tag: 1,
					SenderId: this.userinfo.Sid,
					ReceiverId: this.receiver,
					Content: this.content
				}
				const dataMsg = JSON.stringify(msg)
				// console.log('datamsg', dataMsg)
				uni.sendSocketMessage({
					data: dataMsg,
					success(res) {
						// console.log('发送指令成功', res)
					}
				})
				uni.switchTab({
					url: '/pages/home/home'
				})
			}
		}
	}
</script>

<style lang="scss">
	.send-container {
		margin-left: 20px;
		margin-right: 20px;
		height: 100%;
		display: flex;
		flex-direction: column;

		.send-title {
			text-align: center;
		}

		.content {
			flex: 1;
			padding-bottom: 50px;
			// height: calc(100vh-50);

			.send-body {
				height: 40vh;
			}

			.sticky-view {
				position: sticky;
				bottom: 0;
				width: 100%;
				height: 50px;
			}
		}
	}
</style>